<template>
	<div>
		<blue-button text="新增" :clickEvent="addClickEvent" class="add-btn">
		</blue-button>
		<table class="sv-table">
			<tr class="table-th">
				<th>类目名称</th>
				<th>创建日期</th>
				<!-- <th>生效时间</th> -->
				<th>状态</th>
				<th>操作</th>
			</tr>
			<tr class="table-tr" v-for="(item, index) in getDataArray" :key="index">
				<td>{{item.name}}</td>
				<td>{{item.createTime}}</td>
				<!-- <td>{{item.state}}</td> -->
				<td><span :class="[item.state == '1' ? 'banner-qiyong' : 'banner-tingyong']">{{item.state == "1" ? "已启用" : "已停用"}}</span></td>
				<td class="handle-button" ref="handleButton">
					<gray-button text="编辑" :clickEvent="editClickEvent.bind(this, index)"></gray-button>
					<gray-button :text="item.state == '1' ? '停用' : '启用'" :clickEvent="enableClickEvent.bind(this, item.id, index, item.state)"></gray-button>
					<gray-button text="删除" :disabled="item.state == '1'" :clickEvent="deleteClickEvent.bind(this, item.id, item.state)"></gray-button>
				</td>
			</tr>
		</table>
		<!--样式设置-->
		<div style="margin-top: 10px;">
			<blue-button text="导航样式设置" :clickEvent="StyleClickEvent" class="add-btn"></blue-button>
		</div>
		<edit-model ref="StyleModel" title="导航样式设置">
			<div class="slot-banner" slot="main">
				<div>
					<span class="eidt-slot-title">导航背景颜色设置：</span>
					<input type="color" v-model="tabbgcolor" style="border: none;height: 30px;padding: 0px;"/>
				</div>
				<div>
					<span class="eidt-slot-title">导航文字颜色设置：</span>
					<input type="color" v-model="tabtextcolor" style="border: none;height: 30px;padding: 0px;"/>
				</div>
				<div>
					<span class="eidt-slot-title">选中TAB背景颜色设置：</span>
					<input type="color" v-model="clicktabbgcolor" style="border: none;height: 30px;padding: 0px;"/>
				</div>
				<div>
					<span class="eidt-slot-title">选中TAB文字颜色设置：</span>
					<input type="color" v-model="clicktabtextcolor" style="border: none;height: 30px;padding: 0px;"/>
				</div>
				<div class="fabu-box">
					<blue-button text="确认" :clickEvent="stylesubmitClickEvent"></blue-button>
				</div>
			</div>
		</edit-model>
		<!-- 编辑或新增的弹框 -->
		<edit-model ref="editModel" title="运营类目">
			<div class="slot-banner" slot="main">
				<!-- 运营类目名称 -->
				<div>
					<p class="eidt-slot-title">类目名称</p>
					<input type="text" v-model="itemName" />
				</div>
				<!-- <div> -->
				<!-- <p class="eidt-slot-title">页面路径</p> -->
				<!-- <page-path rootSelector="#edit-model-box"></page-path> -->
				<!-- </div> -->
				<div class="fabu-box">
					<blue-button text="确认" :clickEvent="submitClickEvent"></blue-button>
				</div>
			</div>
			<div slot="slide">
			</div>
		</edit-model>
		<m-toast ref="toast"></m-toast>
		<m-dialog ref="dialog"></m-dialog>
	</div>
</template>

<script>
	import BlueButton from "../../../edit-components/BlueButton";
	import GrayButton from "../../../edit-components/GrayButton";
	import EditModel from "../../../edit-components/EditModel";
	import PagePath from "../../../edit-components/PagePath";
	import { mapGetters } from "vuex";
	import { getPageTree } from "../../../utils/getPageTree";
	import Toast from "../../../edit-components/Toast";
	import Dialog from "../../../edit-components/Dialog";
	import getPageName from "../../../utils/getPageName";
	//引用起名规则的文件
	import * as prefix from "../../../config/page-name/gw/virtualpagename-prefix.js";
	import getId from "../../../utils/initComponentsId";
	export default {
		name: 'hello',
		props: {
			relGroup: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				msg: '这是测试首页',
				type: {},
				// getDataArray: [],
				itemName: "",
				editIndex: -1,
				tabbgcolor: "",
				tabtextcolor: "",
				clicktabbgcolor: "",
				clicktabtextcolor: ""
			}
		},
		computed: {
			...mapGetters([
				"editConfig"
			]),
			componentType() {
				// console.log("this.editConfig.type", this.editConfig.type);
				return this.editConfig.type;
			},
			//这个值对应的是relGroup;
			componentRelGroup() {
				return this.editConfig.id;
			},
			getDataArray() {
				return this.currentVDO.config ? this.currentVDO.config.pages || [] : [];
			},
			currentVDO() {
				return this.getCurrentVDO(this.editConfig.id, this.pageName);
			},
			pageName() {
				return getPageName();
			},
			pagevuename(){
				return this.$store.getters.getRouterLifeCycleOfName.name;
			},
			pageConfig() {
				return getPageTree(this, this.pagevuename).config;
			},
			currentVirtualPageName() {
				return this.pageName + prefix.SELF_PAGE + (this.currentVDO.config.pages.length + 1);
			},
			getPageTree() {
				return getPageTree(this, this.pageName);
			}

		},
		methods: {
			//新增按钮的事件，调出模态框
			addClickEvent() {
				this.handleType = "add";
				this.$refs.editModel.showCover();
				this.itemName = "";
			},
			//编辑按钮的事件
			editClickEvent(index) {
				this.itemName = getPageTree(this, this.pageName).header.TabHead[0].config.pages[index].name;
				// console.log(getPageTree(this, "home").header.TabHead[0]);
				// console.log(this.itemName);
				this.editIndex = index;
				this.handleType = "edit";
				this.$refs.editModel.showCover();
				// let domTree = getPageTree(this, "home");
				// domTree.header.TabHead[0].config.pages[index]
			},
			//根据id获取对应的运营类目item
			getClassifyItemById(id) {
				let item;
				let pages = this.currentVDO.config.pages;
				for(let i = 0; i < pages.length; i++) {
					if(pages[i].id === id) {
						item = pages[i];
						break;
					}
				}
				return item;
			},
			//启用启用禁用的事件
			enableClickEvent(id, index, state) {
				let item = this.getClassifyItemById(id);
				// console.log(item);
				let domTree = getPageTree(this, this.pageName);
				let obj = domTree.header.TabHead[0].config;
				obj.pages[index].state = state === "1" ? "0" : "1";
				this.setEditConfig(this.relGroup, obj, this.pageName);
				//同时隐藏真实组件
				let domTree2 = this.$store.getters.getDomTree[this.pageName];
				for(let comItem of domTree2.content) {
					//找到对应的真实组件
					if(item.comId === comItem.id) {
						comItem.config = {
							state: state === "1" ? "0" : "1"
						}
						this.$store.commit("setDomTree", domTree2);
						break;
					}
				}
			},
			//删除按钮的事件
			deleteClickEvent(id,status) {
				if(status == 1) {
					return
				}
				this.infoDialog("确定要删除该运营类目吗？", () => {
					//删除对应id的运营类目
					let pages = this.currentVDO.config.pages;
					let domTree = this.$store.getters.getDomTree[this.pageName];
					let comId;
					for(let i = 0; i < pages.length; i++) {
						if(pages[i].id === id) {
							//找到对应的运营类目

							// let domTree = this.$store.getters.getDomTree;
							// this.$store.commit("setDomTree", {});
							comId = pages[i].comId;
							//删除运营类目
							pages.splice(i, 1);
							break;
						}
					}
					//删除对应的真实组件
					for(let i = 0; i < domTree.content.length; i++) {
						if(domTree.content[i].id === comId) {
							domTree.content.splice(i, 1);
							this.$store.commit("setDomTree", domTree);
							break;
						}
					}
					// for(let item of domTree.content) {

					// }

				});

			},
			//配置提示框的通用方法
			infoDialog(msg, confirmFn) {
				this.$refs.dialog.dialog({
					msg,
					confirmFn
				});
			},
			//模态框中提交确定按钮的事件
			//处理两个流程
			//1：往tabhead的config添加一个运营类目
			//2：向domTree中添加一个对应的真实组件
			//引用/src/config/page-name/gw/virtualpagename-prefix文件
			//使用该前缀+index值的命名规则
			submitClickEvent() {
				if(!this.itemName) {
					this.$refs.toast.toast("类目标题不能为空");
					return;
				}
				//进行编辑操作
				if(this.handleType === "edit") {
					let obj = getPageTree(this, this.pageName).header.TabHead[0].config;
					obj.pages[this.editIndex] = {
						...obj.pages[this.editIndex],
						name: this.itemName
					}
					this.setEditConfig(this.relGroup, obj, this.pageName);
					//关闭editmodel
					this.$refs.editModel.hideCover();
					return;
				}
				let obj = this.currentVDO;
				// console.log(obj);
				if(!obj.config) {
					obj.config = {};
				}
				if(!obj.config.pages) {
					obj.config.pages = [];
				}
				// let virtualPage = prefix.SELF_CLASSIFY_PAGE + obj.config.pages.length + 1;
				//let currentVirtualPageName = this.pageName + prefix.SELF_PAGE + (obj.config.pages.length + 1);
                let domTree = this.$store.getters.getDomTree[this.pageName];
                let component = {
                    id: getId(),
                    type: "NewZone",
                    index: domTree.content.length,
                    config: {state: "1"}
                }
                domTree.content.push(component);
                //添加对应组件到对应页面
                this.$store.commit("setDomTree", domTree);
                //NewThematicActivities
                //添加类目item
                let page = {
					id: "th" + parseInt(Math.random() * 100000),
					name: this.itemName,
					createTime: this.timeFormatFn(new Date().getTime()),
					state: "1", //启用状态
					// virtualPage: currentVirtualPageName
					comId: component.id
				}
				obj.config.pages.push(page);
				// console.log("obj.config", obj.config);
				//将改变后的config对象保存到对应的Object
				this.setEditConfig(this.editConfig.id, obj.config);
				//自动切换到新的运营类目页面
				// setTimeout(() => {
				// 	this.changePageShown(obj.config.pages.length);
				// }, 300);
				//关闭editmodel
				this.$refs.editModel.hideCover();
			},
			//自动切换到新的运营类目页面
			changePageShown(index) {
				this.$store.commit("cjy/CHANGE_CLASSIFY_INDEX", index);
			},
			//将时间戳转换时间
			timeFormatFn(time) {
				let date = new Date(time);
				return `${date.getFullYear()}-${date.getMonth() + 1 > 9 ? date.getMonth() + 1:'0' + (date.getMonth() + 1)}-${date.getDate()> 9 ? date.getDate() : '0' + date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}`;
			},
			//样式设置
			StyleClickEvent() {
				this.$refs.StyleModel.showCover();
				this.getBgcolordata()
			},
			stylesubmitClickEvent() {
				//校验
				let regu = /^#[0-9a-fA-F]{3,6}$/;
				let re = new RegExp(regu);
				if(this.tabbgcolor && !re.test(this.tabbgcolor) || this.tabtextcolor && !re.test(this.tabtextcolor) || this.clicktabbgcolor && !re.test(this.clicktabbgcolor) || this.clicktabtextcolor && !re.test(this.clicktabtextcolor)) {
					this.$refs.toast.toast("请输入带#号的16进制颜色");
					return;
				}
				//存值
				this.setPageConfig({
					tabbgcolor: this.tabbgcolor,
					tabtextcolor: this.tabtextcolor,
					clicktabbgcolor: this.clicktabbgcolor,
					clicktabtextcolor: this.clicktabtextcolor,
				})
				this.$refs.StyleModel.hideCover();
				PSEvent.trigger("TabStyleUpdate");
			},
			//回显获取设置的颜色
			getBgcolordata() {
				if(this.pageConfig) {
					this.tabbgcolor = this.pageConfig.tabbgcolor;
					this.tabtextcolor = this.pageConfig.tabtextcolor;
					this.clicktabbgcolor = this.pageConfig.clicktabbgcolor;
					this.clicktabtextcolor = this.pageConfig.clicktabtextcolor;
				}
			},

		},
		filters: {
			timeFormat(time) {
				if(time) {
					let date = new Date(time);
					return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()> 9 ? date.getDate() : '0' + date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}`;
				} else {
					return "无"
				}
			}
		},
		created() {
			// console.log(this.$store);
		},
		mounted() {
			this.getBgcolordata()
		},
		components: {// "handle-button": HandleButton,
			"blue-button": BlueButton,
			"gray-button": GrayButton,
			"edit-model": EditModel,
			"page-path": PagePath,
			"m-toast": Toast,
			"m-dialog": Dialog,
		},

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.add-btn {
		margin-bottom: 10px;
	}
	
	.edit-box {
		/* display: flex;  */
		/* border: 1px solid blue; */
		height: 500px;
		width: 100%;
		overflow: scroll;
		/* margin-top: 20px; */
	}
	
	.banner-qiyong {
		background-color: #2980b9;
		color: #fff;
		font-size: 12px;
		border-radius: 3px;
		padding: 1px;
	}
	
	.banner-tingyong {
		background-color: #e74c3c;
		color: #fff;
		font-size: 12px;
		border-radius: 3px;
		padding: 1px;
	}
	#app .slot-banner .eidt-slot-title{
		width: 160px;
	}
	.fabu-box {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
</style>